<section style="background:#efefe9;">
    <div class="container">
        <div class="row">
            <div class="board">
                <!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>-->
                <div class="board-inner">
                    <ul class="nav nav-tabs" id="myTab">
                        <div class="liner"></div>
                        <?php foreach($accounts as $i => $v){ ?> 
                        <li class="<?php if($i == 0) echo 'active';?>">
                            <a href="#konto_<?php echo $v['id_rodzaj_konta']; ?>" data-toggle="tab" title="<?php echo $v['nazwa']; ?>">
                                <span class="round-tabs one">
                                    <i class="fa fa-money fa-fw"></i>
                                </span> 
                            </a></li>
                        <?php } ?>
                    </ul></div>

                <div class="tab-content">
                   <?php foreach($accounts as $i => $v){ ?> 
                    <div class="tab-pane fade <?php if($i == 0) echo 'in active';?>" id="konto_<?php echo $v['id_rodzaj_konta']; ?>">

                        <h3 class="head text-center"><?php echo $v['nazwa']; ?></h3>
                        <div class="row" style="margin: 0px 72px; font-size: 17px;">
                            <div class="col-sm-6">
                                <p>Opłata za przelewy wewnętrzne:<b> <?php echo round($v['oplata_wewnetrzny'],2); ?> %</b></p>
                                <p>Maksymalny debet:<b> <?php echo round($v['maksymalne_zadluzenie'],2); ?> zł</b></p>
                                <p>Opłata za start:<b> <?php echo round($v['oplata_start'],2); ?> zł</b></p>
                            </div>
                            <div class="col-sm-6">
                                <p>Opłata za przelewy zewnętrzne:<b> <?php echo round($v['oplata_zewnetrzny'],2); ?> %</b></p>
                                <p>Opłata za prowadzenie:<b> <?php echo round($v['oplata_prowadzenie'],2); ?> zł/miesiąc</b></p>
                                <p>Opłata za kartę:<b> <?php echo round($v['oplata_karta'],2); ?> zł/miesiąc</b></p>
                            </div>
                        </div>
                        <?php if(Yii::app()->user->IsGuest){ ?>
                        <p class="text-center">
                            <a class="btn btn-success" href="<?php echo Yii::app()->createUrl('home/login')?>">Zaloguj się</a>
                            <a class="btn btn-danger"  href="<?php echo Yii::app()->createUrl('home/register')?>">Zarejestruj się</a>
                        </p>
                        <?php } ?>
                    </div>
                   <?php } ?>
                   
                    <div class="clearfix"></div>
                </div>

            </div>


            <style>
                .board{
                    width: 75%;
                    margin: 60px auto;
                    height: 500px;
                    background: #fff;
                    /*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/
                }
                .board .nav-tabs {
                    position: relative;
                    /* border-bottom: 0; */
                    /* width: 80%; */
                    margin: 40px auto;
                    margin-bottom: 0;
                    box-sizing: border-box;

                }

                .board > div.board-inner{
                    background: #fafafa url(http://subtlepatterns.com/patterns/geometry2.png);
                    background-size: 30%;
                }

                p.narrow{
                    width: 60%;
                    margin: 10px auto;
                }

                .liner{
                    height: 2px;
                    background: #ddd;
                    position: absolute;
                    width: 80%;
                    margin: 0 auto;
                    left: 0;
                    right: 0;
                    top: 50%;
                    z-index: 1;
                }

                .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
                    color: #555555;
                    cursor: default;
                    /* background-color: #ffffff; */
                    border: 0;
                    border-bottom-color: transparent;
                }

                span.round-tabs{
                    width: 70px;
                    height: 70px;
                    line-height: 70px;
                    display: inline-block;
                    border-radius: 100px;
                    background: white;
                    z-index: 2;
                    position: absolute;
                    left: 0;
                    text-align: center;
                    font-size: 25px;
                }

                span.round-tabs.one{
                    color: rgb(34, 194, 34);border: 2px solid rgb(34, 194, 34);
                }

                li.active span.round-tabs.one{
                    background: #fff !important;
                    border: 2px solid #ddd;
                    color: rgb(34, 194, 34);
                }

                span.round-tabs.two{
                    color: #febe29;border: 2px solid #febe29;
                }

                li.active span.round-tabs.two{
                    background: #fff !important;
                    border: 2px solid #ddd;
                    color: #febe29;
                }

                span.round-tabs.three{
                    color: #3e5e9a;border: 2px solid #3e5e9a;
                }

                li.active span.round-tabs.three{
                    background: #fff !important;
                    border: 2px solid #ddd;
                    color: #3e5e9a;
                }

                span.round-tabs.four{
                    color: #f1685e;border: 2px solid #f1685e;
                }

                li.active span.round-tabs.four{
                    background: #fff !important;
                    border: 2px solid #ddd;
                    color: #f1685e;
                }

                span.round-tabs.five{
                    color: #999;border: 2px solid #999;
                }

                li.active span.round-tabs.five{
                    background: #fff !important;
                    border: 2px solid #ddd;
                    color: #999;
                }

                .nav-tabs > li.active > a span.round-tabs{
                    background: #fafafa;
                }
                .nav-tabs > li {
                    width: 20%;
                }
                /*li.active:before {
                    content: " ";
                    position: absolute;
                    left: 45%;
                    opacity:0;
                    margin: 0 auto;
                    bottom: -2px;
                    border: 10px solid transparent;
                    border-bottom-color: #fff;
                    z-index: 1;
                    transition:0.2s ease-in-out;
                }*/
                li:after {
                    content: " ";
                    position: absolute;
                    left: 45%;
                    opacity:0;
                    margin: 0 auto;
                    bottom: 0px;
                    border: 5px solid transparent;
                    border-bottom-color: #ddd;
                    transition:0.1s ease-in-out;

                }
                li.active:after {
                    content: " ";
                    position: absolute;
                    left: 45%;
                    opacity:1;
                    margin: 0 auto;
                    bottom: 0px;
                    border: 10px solid transparent;
                    border-bottom-color: #ddd;

                }
                .nav-tabs > li a{
                    width: 70px;
                    height: 70px;
                    margin: 20px auto;
                    border-radius: 100%;
                    padding: 0;
                }

                .nav-tabs > li a:hover{
                    background: transparent;
                }

                .tab-content{
                }
                .tab-pane{
                    position: relative;
                    padding-top: 50px;
                }
                .tab-content .head{
                    font-family: 'Roboto Condensed', sans-serif;
                    font-size: 25px;
                    text-transform: uppercase;
                    padding-bottom: 10px;
                }
                .btn-outline-rounded{
                    padding: 10px 40px;
                    margin: 20px 0;
                    border: 2px solid transparent;
                    border-radius: 25px;
                }

                .btn.green{
                    background-color:#5cb85c;
                    /*border: 2px solid #5cb85c;*/
                    color: #ffffff;
                }



                @media( max-width : 585px ){

                    .board {
                        width: 90%;
                        height:auto !important;
                    }
                    span.round-tabs {
                        font-size:16px;
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                    }
                    .tab-content .head{
                        font-size:20px;
                    }
                    .nav-tabs > li a {
                        width: 50px;
                        height: 50px;
                        line-height:50px;
                    }

                    li.active:after {
                        content: " ";
                        position: absolute;
                        left: 35%;
                    }

                    .btn-outline-rounded {
                        padding:12px 20px;
                    }
                }

            </style>